<template>
  <el-card>
    <div class="df kindbox jcsb" slot="header">
      <div>商品分类</div>
      <el-button type="primary" @click="dialogFormVisible = true">
        添加分类
      </el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <!-- 多选 -->
      <el-table-column type="index" label="序号"></el-table-column>
      <!-- 分类名称 -->
      <el-table-column label="分类名称">
        <template slot-scope="scope">
          <span v-if="!scope.row.isEdit">{{ scope.row.cateName }}</span>
          <el-input v-else size="mini" v-model="scope.row.cateName"></el-input>
        </template>
      </el-table-column>
      <!-- 是否启用按钮 -->
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            :disabled="!scope.row.isEdit"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
            :type="scope.row.isEdit ? 'success' : 'default'"
          >
            {{ scope.row.isEdit ? '完成' : '编辑' }}
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="mt20"
      background
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <!-- 弹窗表格 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <!-- 分类名称 -->
        <el-form-item label="分类名称">
          <el-input v-model="form.cateName" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 开关 -->
        <el-form-item>
          <el-switch
            style="display: block"
            v-model="form.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            inactive-text="是否启用"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSure">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
// 解构ajax函数
import {getCateListReq, editCateReq, AddCateReq, delCateReq} from '@/api/goods'
export default {
  data() {
    return {
      //分类数据
      tableData: [],
      //分页数据
      currentPage: 1,
      pageSize: 3,
      total: 0,
      // 添加分类
      dialogFormVisible: false,
      form: {
        cateName: '',
        state: true,
      },
      value: true,
    }
  },

  methods: {
    // 获取分类列表
    async getData() {
      let currentPage = this.currentPage
      let pageSize = this.pageSize
      // 获取数据
      let res = await getCateListReq({
        currentPage,
        pageSize,
      })
      // 解构
      let {data, total} = res.data
      // 修改数据
      data.forEach(v => {
        v.state = 1 ? true : false
        // 添加一个字段，是否可编辑
        v.isEdit = false
      })

      // 数据赋值
      this.total = total
      this.tableData = data

      // 如果data为[]，并且currentPage>1 返回到上一页
      if (data.length === 0 && currentPage != 1) {
        this.currentPage--
        this.getData()
      }
    },
    //改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },

    //删除
    async handleDelete(row) {
      // 获取id
      let id = row.id
      // 发请求
      let res = await delCateReq({id})

      // 解构数据
      let {code} = res.data
      // 判断
      if (code === 0) {
        // 拉取数据
        this.getData()
      }
    },

    // 按钮方法
    async handleEdit(row) {
      // console.log(index, row)
      // 把可编辑状态取反
      row.isEdit = !row.isEdit
      // 发送请求
      if (!row.isEdit) {
        // 发送请求
        let res = await editCateReq({
          ...row,
          state: row.state ? 1 : 0,
        })
      }
    },

    // 弹窗
    async handleSure() {
      // 发送请求
      let res = await AddCateReq({
        ...this.form,
        state: this.form.state ? 1 : 0,
      })
      // 解构数据
      let {code} = res.data
      // 判断
      if (code === 0) {
        this.dialogFormVisible = false
        // 重新拉取数据
        this.getData()
      }
    },
  },
  //初始化发送请求
  created() {
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.kindbox {
  height: 36px;
  line-height: 36px;
}
</style>
